<template>
  <view class="detail-page">
    <view class="top-space"></view>
    
    <view class="content">
      <!-- 用户信息和价格 -->
      <view class="user-info">
        <view class="user">
          <view class="avatar" :style="avatarStyle(card)">{{ (card.username || '').slice(0,1) }}</view>
          <view class="username">{{ card.username }}</view>
        </view>
        <view class="price">￥{{ card.price }}</view>
      </view>
      
      <!-- 图片展示区域 -->
      <view class="image-container" v-if="card.image">
        <image 
          class="detail-image" 
          :src="card.image" 
          mode="widthFix"
          @click="previewImage(card.image)"
        ></image>
      </view>
      
      <!-- 标题 -->
      <view class="title">{{ card.title }}</view>
      
      <!-- 详细信息 -->
      <view class="description">
        <text class="desc-text">（演示）{{ card.title }}。发布者可以在这里填写更详细的任务描述、地点、时间和注意事项。</text>
      </view>
      
      <!-- 操作按钮 -->
      <view class="actions">
        <button class="contact-btn" @click="contact(card)">联系发布者</button>
        <button class="accept-btn" @click="accept(card)">接单</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      card: {
        title: '',
        username: '',
        price: 0,
        image: ''
      }
    }
  },
  
  onLoad(options) {
    // 获取传递的参数
    const cardData = JSON.parse(decodeURIComponent(options.cardData || '{}'))
    this.card = cardData
  },
  
  methods: {
    /* --- 头像样式辅助 --- */
    avatarStyle(card) {
      if (!card.username) return {}
      const colors = [
        'linear-gradient(135deg,#6dd5ed 0%,#2193b0 100%)',
        'linear-gradient(135deg,#f6d365 0%,#fda085 100%)',
        'linear-gradient(135deg,#a1c4fd 0%,#c2e9fb 100%)',
        'linear-gradient(135deg,#d4fc79 0%,#96e6a1 100%)'
      ]
      const index = card.username.charCodeAt(0) % colors.length
      return {
        background: colors[index],
        color: '#fff'
      }
    },
    
    /* demo actions */
    accept(card) {
      uni.showToast({ title: '已接单（演示）', icon: 'success' })
    },
    contact(card) {
      uni.showToast({ title: '打开聊天/联系方式（演示）', icon: 'none' })
    },
    
    previewImage(imageUrl) {
      uni.previewImage({
        urls: [imageUrl]
      })
    }
  }
}
</script>

<style scoped>
.detail-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 100%);
  box-sizing: border-box;
}

/* 顶部占位：让页面内容不被原生 titleNView 覆盖 */
.top-space {
  height: 54px;
  width: 100%;
}

.content {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 用户信息和价格 */
.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 18px rgba(18, 24, 40, 0.06);
}

.user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}

.username {
  font-size: 16px;
  font-weight: 700;
  color: #16202b;
}

.price {
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(135deg, #6dd5ed 0%, #2193b0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 图片容器 */
.image-container {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(18, 24, 40, 0.06);
}

.detail-image {
  width: 100%;
  display: block;
}

/* 标题 */
.title {
  font-size: 20px;
  font-weight: 700;
  color: #16202b;
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 18px rgba(18, 24, 40, 0.06);
}

/* 详细信息 */
.description {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 18px rgba(18, 24, 40, 0.06);
  flex: 1;
}

.desc-text {
  color: #465360;
  line-height: 1.6;
  font-size: 15px;
}

/* 操作按钮 */
.actions {
  display: flex;
  gap: 12px;
  padding: 16px 0;
}

.contact-btn, .accept-btn {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  border: none;
  outline: none;
  cursor: pointer;
  box-shadow: none;
  font-size: 16px;
  font-weight: 700;
}

.contact-btn {
  background: #f0f2f5;
  color: #333;
}

.accept-btn {
  background: linear-gradient(90deg, #6dd5ed, #2193b0);
  color: #fff;
}
</style>